<!DOCTYPE html>
<%@ include file="/header/header.jsp"%>
<%@ include file="/header/header-dialog.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/css/reset.css">
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/css/font-awesome-4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/plugin/wangEditor/css/wangEditor.css">
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/plugin/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/plugin/wangEditor/css/custom.css">

<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/plugin/wangEditor/css/app.css">
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/plugin/zui/css/zui.min.css">
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/plugin/zui/css/chosen.css">
<link rel="stylesheet" type="text/css" href="${ctx }/js/report/asset/plugin/layer/skin/layer.css">

<style>
.dialog-bd {
	padding: 20px;
}
</style>
</head>
<body>
<div class="dialog-bd">
<form id="zbmbForm" action="${ctx}/mbglController/saveZBMB.do"
	method="post">
	<textarea name="tplHtml" id="tplHtml" style="display: none;"></textarea>

<table width="99%" border="0" align="center" cellpadding="0"
	cellspacing="0" class="contentTable">
	<tr>
		<td width="15%" height="35" align="right">模板名称：</td>
		<td width="20%"><input type="text"
			onkeyup="cte('mbmc','mbbh')"
			onkeydown="cte('mbmc','mbbh')"
			onmousedown="changeClass('mbmctip')" name="mbmc" maxlength="100"
			id="mbmc" class="textInput width_205" /></td>
		<td id="mbmctip"><span style="color: red;">*</span></td>
	</tr>
	<tr>
		<td height="35" align="right">模板简称：</td>
		<td><input type="text" name="mbbh"
			onmousedown="changeClass('mbbhtip')" maxlength="100" id="mbbh"
			class="textInput width_205" /></td>
		<td id="mbbhtip"><span style="color: red;">*</span></td>
	</tr>
	<tr <c:if test="${!isadmin }">style="display:none;"</c:if>>
		<td height="35" align="right">所属部门：</td>
		<td>
			<input id="deptname" name="deptname" value="${deptname }" maxlength="100" onmousedown="chooseDept_zbmb_add()" class="textInput width_205" type="text" readonly="readonly" />
	        <input id="deptid" name="deptid" type="hidden" value="${deptid }"/>
	    </td>
		<td id="mbSorttip"><span style="color: red;">*</span></td>
	</tr>
	<tr>
		<td height="35" align="right">排序号：</td>
		<td><input type="text" onmousedown="changeClass('mbSorttip')"
			name="mbSort" id="mbSort" maxlength="6" class="textInput width_205" /></td>
		<td id="mbSorttip"><span style="color: red;">*</span></td>
	</tr>

	<tr>
		<td colspan="3">
			<div id="twEditor" style="padding:20px;">
				<textarea id="report-source" style="width: 95%; height: 500px;" contenteditable="true"></textarea>
			</div>
		</td>
	</tr>
</table>


</form>

</div>
<div class="dialog-ft">
	<input type="button" id="previewBtn" name="button" value="预览" class="btn" />
	<input type="button" id="saveBtn" name="button" value="保存" class="btn" />
</div>

	<div id="express" style="display: none; margin: 20px;">
		<div class="form-inline" style="margin-bottom: 10px;">
			<div class="form-group">
				<label for="">名称</label>
				<input type="text" class="form-control input-sm JS_expressName" id="" placeholder="">
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2">数据类型</label>
				<select class="form-control input-sm">
				  <option>字符串</option>
				  <option>整数</option>
				</select>
			</div>
		</div>
		<table class="table table-bordered">
			<colgroup>
				<col width="20%">
			</colgroup>
			<tr>
				<th>字段</th>
				<td><div class="field-wrap"></div></td>
			</tr>
			<tr>
				<th>SQL表达式</th>
				<td>
					<div class="function-warp">
						<span class="btn btn-default btn-xs" data-value="Sum()">Sum(Object col)</span>
						<span class="btn btn-default btn-xs" data-value="Avg()">Avg(Object col)</span>
						<span class="btn btn-default btn-xs" data-value="Count()">Count(Object col)</span>
						<span class="btn btn-default btn-xs" data-value="Max()">Max(Object col)</span>
						<span class="btn btn-default btn-xs" data-value="Min()">Min(Object col)</span>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<textarea class="JS_express form-control"></textarea>
				</td>
			</tr>
		</table>
	</div>	
</body>

<script type="text/javascript" src="${ctx }/js/report/asset/plugin/wangEditor/js/wangEditor.js"></script>
<script type="text/javascript" src="${ctx }/js/report/asset/plugin/layer/layer.js"></script>
<script type="text/javascript" src="${ctx }/js/report/asset/plugin/zui/js/chosen.js"></script>
<script type="text/javascript" src="${ctx }/js/report/asset/plugin/slide/2.1.1/slide.js"></script>
<script type="text/javascript" src="${ctx }/js/report/asset/plugin/echarts/echarts-all.js"></script>
<script type="text/javascript" src="${ctx }/js/report/asset/plugin/wangEditor/tags-menu.js"></script>
<script type="text/javascript" src="${ctx }/js/report/asset/plugin/wangEditor/chart-menu.js"></script>

<script type="text/javascript">
	$(function(){
		var editor = new wangEditor('report-source');
		editor.config.menus = [
			'source',
	        '|',
	        'bold',
	        'underline',
	        'italic',
	        'strikethrough',
	        'eraser',
	        'forecolor',
	        'bgcolor',
	        '|',
	        'quote',
	        'fontfamily',
	        'fontsize',
	        'head',
	        'unorderlist',
	        'orderlist',
	        'alignleft',
	        'aligncenter',
	        'alignright',
	        '|',
	        'link',
	        'unlink',
	        'table',
	        // 'emotion',
	        '|',
	        'img',
	        'video',
	        // 'location',
	        'tags',
	        'chart',
	        '|',
	        'undo',
	        'redo',
	        'fullscreen'
	
	        // 'source',
	        // '|',
	        // 'bold',
	        // 'lineheight',
	        // 'tag',
	        // 'chart',
	        // 通过自定义菜单，让新配置的菜单显示在页面中。
	        // 上文已经确定，新配置的『缩进』菜单id为 'indent'
	        // 'indent'
	    ];
		//上传图片
		editor.config.uploadImgUrl = '${ctx}/mbglController/upload.do';
		editor.config.uploadImgFileName = 'myFileName';
	
		//配置自定义参数
		editor.config.uploadParams = {
			
		};
	
		//设置headers
		editor.config.uploadHeaders= {
			'Accept': 'text/x-json'
		};
		
		editor.create();
	
		
		$('#saveBtn').click(function(){
			var flag = true;
			if (!checkError("mbmc","mbmctip","模板名称",0)) flag=false;
			if (!checkError("mbbh","mbbhtip","模板编号",0)) flag=false;
			if (!checkError("mbSort","mbSorttip","排序号",1)) flag=false;
			
			if(!flag){
				return;
			}
				
			//var content = editor.$txt.html();
			//$("#tplHtml").val(content);
			
			var $toPass = editor.$txt.clone();
	    	var tags = $toPass.find('.tags');
	    	if(tags){
				$.each(tags, function(i,e) {
					var $funs = $(e).find('span.tagjson').clone();
					$(e).empty().html($funs);
				});
	    	}
	    	var charts = $toPass.find('.charts');
	    	if(charts){
				charts.find('.chart-box').html('');
			}
	    	var html = $toPass.html();
	    	$("#tplHtml").val(html);
			
//			var charts = editor.$txt.find('.charts');
//			if(charts){
//				charts.find('.chart-box').html('');
//			}
			
			$('#zbmbForm').form('submit',{
				url:"${ctx}/mbglController/saveZBMB.do",
				onSubmit: function(){
					return $(this).form('validate');
				},success: function(result){
					var res = eval("("+result+")");
					if(res.success){
						parent.navTab.reload('${ctx}/mbglController/toZbmbList.do');
						parent.dialog.close();
					}else{
						alert(res.error);
					}
				}
			});
		});
		
		$('#previewBtn').click(function(){
			
//			var html = editor.$txt.html();
			
			var $toPass = editor.$txt.clone();
	    	var tags = $toPass.find('.tags');
	    	if(tags){
				$.each(tags, function(i,e) {
					var $funs = $(e).find('span.tagjson').clone();
					$(e).empty().html($funs);
				});
	    	}
	    	var html = $toPass.html();
			
			//var charts = editor.$txt.find('.charts');
			//charts.find('.chart-box').html('');
			console.log("html>>>>>" + html);
			openUrlByPost('${ctx}/mbglController/preview.do', {'tplHtml' : html});
		});
	});
	
	function changeClass(id){
		$('#'+id).removeClass("formTip");
		$('#'+id)[0].innerHTML = '<span style="color: red;">*</span>';
		return true;
	}
	
    function cte(name,simpleName){
    	var siteName = $('#'+name).val();
    	if(siteName==''){
    		$('#'+simpleName).val('');
    	}else{
    		$('#'+simpleName).val(ucfirst(codefans_net_CC2PY(siteName)).toLowerCase());
    	}
    }
    
    /**
     * [openUrlByPost 用表单模拟post方式提交]
     * @param  {[type]} URL    [新开的链接地址]
     * @param  {[type]} PARAMS [参数字典， json]
     * @return {[type]}        [void]
     */
    function openUrlByPost(URL, PARAMS) { 
        var temp_form = document.createElement("form");      
        temp_form.action = URL;      
        temp_form.target = "_blank";
        temp_form.method = "post";      
        temp_form.style.display = "none"; 
        for (var x in PARAMS) { 
            var opt = document.createElement("input");
            opt.type = "hidden";  
            opt.name = x;      
            opt.value = PARAMS[x];      
            temp_form.appendChild(opt);      
        }      
        document.body.appendChild(temp_form);      
        temp_form.submit();
    } 
     
     function chooseDept_zbmb_add(){
    		parent.deptDialog=null;
    		parent.deptDialog = show_by_url('选择部门','${ctx}/organizeController/toshiftUser.do?type=1&t='+Math.random()*1000, '400', '450');
    	}

    	parent.deptCallBack=function(node){
    		$("#deptid").val(node.id);
    		$("#deptname").val(node.name);
    	};
	</script>
	

</html>